<!-- <el-table
        v-if="reload"
        v-loading="loading"
        element-loading-text="加载中"
        highlight-current-row
        border
        :data="tableData"
        :style="{
          width: '100%',
        }"
        @selection-change="selectionChange"
        @row-click="rowClick"
      >
        <el-table-column type="selection" />

        <el-table-column
          v-if="checkeds.toString().indexOf(translationData.date) !== -1"
          :label="translationData.date"
          prop="date"
        >
        </el-table-column>

        <el-table-column
          v-if="checkeds.toString().indexOf(translationData.name) !== -1"
          :label="translationData.name"
          prop="name"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkeds.toString().indexOf(translationData.address) !== -1"
          :label="translationData.address"
          prop="address"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.address }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="openEditDialog(scope.row)"
            >
              窗口编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              class="tableDelBtn"
              @click="deletTableData(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table> -->


      <template>
    <div class="child1">
        我是第一个自组件gdh ghgh 
        <div id="searchBox">
          gdhjg
        </div>
        <el-button type="text" style="margin-left:10px" id="closeSearchBtn" @click="closeSearch">
          {{word}}
          <i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
        </el-button>
    </div>
</template>

<script>
    export default {
      name: 'child1',
      data(){
        return{
          showAll:true,
        }
      },
      computed: {
        word: function() {
          if (this.showAll == false) {
            //对文字进行处理
            return "展开搜索";
          } else {
            return "收起搜索";
          }
        }
      },
        mounted() {
    /**
     * 收起搜索
     */
    this.$nextTick(function() {
      this.closeSearch();
    });
  },
  methods:{
    closeSearch() {
      this.showAll = !this.showAll;
      var searchBoxHeght = document.getElementById("searchBox");
      if (this.showAll == false) {
        searchBoxHeght.style.height = 60 + "px";
      } else {
        searchBoxHeght.style.height = "auto";
      }
    }
  }
    }
</script>

<style>

#searchBox {
  overflow: hidden;
}
</style>
